import Vue from 'vue'
import VueRouter from 'vue-router'

const Login = ()=> import(/* webpackChunkName:"login_home_welcome" */ "../views/Login")
const Home = ()=> import(/* webpackChunkName:"login_home_welcome" */ "../views/Home")
const Welcome = ()=> import(/* webpackChunkName:"login_home_welcome" */ "../components/Welcome")
const Users = ()=> import(/* webpackChunkName:"users" */ "../components/users/Users")
const Rights = ()=> import(/* webpackChunkName:"power" */ "../components/power/Rights")
const Roles = ()=> import(/* webpackChunkName:"power" */ "../components/power/Roles")
const Categories = ()=> import(/* webpackChunkName:"goods" */ "../components/goods/Categories")
const Params = ()=> import(/* webpackChunkName:"goods" */ "../components/goods/Params")
const Goods = ()=> import(/* webpackChunkName:"goods" */ "../components/goods/Goods")
const AddGoods = ()=> import(/* webpackChunkName:"goods" */ "../components/goods/AddGoods")
const Orders = ()=> import(/* webpackChunkName:"orders" */ "../components/orders/Orders")
const Reports = ()=> import(/* webpackChunkName:"reports" */ "../components/reports/Reports")
const Page404 = ()=> import(/* webpackChunkName:"page" */ "../views/Page404")

/*import Login from "../views/Login"
import Home from "../views/Home"
import Welcome from "../components/Welcome"
import Users from "../components/users/Users"
import Rights from "../components/power/Rights"
import Roles from "../components/power/Roles"
import Categories from "../components/goods/Categories"
import Params from "../components/goods/Params"
import Goods from "../components/goods/Goods"
import AddGoods from "../components/goods/AddGoods"
import Orders from "../components/orders/Orders"
import Reports from "../components/reports/Reports"
import Page404 from "../views/Page404"*/

Vue.use(VueRouter)

const routes = [
    {
        path: '/',  //使用*号可以匹配所有非配置路径
        redirect: "/login"
    },
    {
        path: '/login',
        name: 'Login',
        component: Login
    },
    {
        path: '/home',
        name: 'Home',
        component: Home,
        redirect: '/welcome',
        children:[
            {
                path: '/welcome',
                name: 'Welcome',
                component: Welcome
            },
            {
                path: '/users',
                name: 'Users',
                component: Users
            },
            {
                path: '/rights',
                name: 'Rights',
                component: Rights
            },
            {
                path: '/roles',
                name: 'Roles',
                component: Roles
            },
            {
                path: '/categories',
                name: 'Categories',
                component: Categories
            },
            {
                path: '/params',
                name: 'Params',
                component: Params
            },
            {
                path: '/goods',
                name: 'Goods',
                component: Goods
            },
            {
                path: '/goods/add',
                name: 'AddGoods',
                component: AddGoods
            },
            {
                path: '/orders',
                name: 'Orders',
                component: Orders
            },
            {
                path: '/reports',
                name: 'Reports',
                component: Reports
            }
        ]
    },
    {
        path: '/404',
        name: 'Page404',
        component: Page404
    }
]

const router = new VueRouter({
    routes
})

/*
$router  //当前项目的全局路由实例
$route   //当前组件的路由信息
*/

//路由守卫
//to: 表示将要访问的路径(route)
//from: 表示从哪里来(route)
//next: 下一个要做的操作
router.beforeEach((to, from, next)=>{

    //如果用户访问的是login路径,则直接放行
    if(to.path === "/login") return next();
    //如果是其他路径则需要登录鉴权
    //获取token(判断用户是否登录的重要依据就是是否在本地存储中存在token值)
    let token = window.sessionStorage.getItem("token");
    //如果不存在token值那么直接重定向到登录页面
    if(!token) return next("/login")
    //token值存在的情况下可以访问任何路径(直接放行)
    next()
})

//路由守卫
//全局路由守卫
//router.beforeEach
//router.beforeResolve
//router.afterEach  (to, from)
//路由独享守卫(写在路由配置表中)
//beforeEnter
//组件路由守卫
//beforeRouteEnter(to, from, next) {
// 在渲染该组件的对应路由被 confirm 前调用
// 不！能！获取组件实例 `this`
// 因为当守卫执行前，组件实例还没被创建
//beforeRouteUpdate(to, from, next) {
// 在当前路由改变，但是该组件被复用时调用
// 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
// 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 `this`
//beforeRouteLeave(to, from, next) {
//     // 导航离开该组件的对应路由时调用
//     // 可以访问组件实例 `this`
//   }




export default router
